<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/10/17
  Time: 13:09
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="新增订阅"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.add.subscribe"/></h4>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <div class="form-horizontal">
                    <div class="sie-padding-top">
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.subscription.type"/></label>

                            <div class="col-md-7">
                                <input type="radio" name="sub_type" value="1" checked="checked"/><spring:message code="label.tenant.accordingTo.device.subscribe"/>
                                <input type="radio" name="sub_type" value="2"/><spring:message code="label.tenant.accordingTo.group.subscribe"/>
                                <input type="radio" name="sub_type" value="3"/><spring:message code="label.tenant.accordingTo.line.subscribe"/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.type"/>:</label>

                            <div class="col-md-7">
                                <select id="type" style="padding:2px 12px"
                                        class="form-control sie-input-border sie-input-uwh"
                                        onchange="loadModel(this.value)">
                                    <option><spring:message code="label.select"/></option>
                                    <c:forEach items="${types}" var="type">
                                        <option value="${type}">${type}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.model"/>:</label>

                            <div class="col-md-7">
                                <select id="model" style="padding:2px 12px"
                                        class="form-control sie-input-border sie-input-uwh"
                                        onchange="loadMTId(this.value)">
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <input id="deviceId" class="hidden"/>
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.id"/>:</label>

                            <div class="col-md-7">
                                <select style="padding:2px 12px" id="uniqueId"
                                        class="form-control sie-input-border sie-input-uwh"
                                        onchange="MTIdChangeGetEvent(this.value)">
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.group"/>:</label>

                            <div class="col-md-7">
                                <select style="padding:2px 12px" id="group" disabled="disabled"
                                        class="form-control sie-input-border sie-input-uwh" onchange="GroupChangeGetEvent(this.value)">
                                    <option><spring:message code="label.select"/></option>
                                    <c:forEach items="${groups}" var="group">
                                        <option>${group.group}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.line"/>:</label>

                            <div class="col-md-7">
                                <select style="padding:2px 12px" id="line" disabled="disabled"
                                        class="form-control sie-input-border sie-input-uwh" onchange="LineChangeGetEvent(this.value)">
                                    <option><spring:message code="label.select"/></option>
                                    <c:forEach items="${lines}" var="line">
                                        <option>${line.line}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.user.mail"/>:</label>

                            <div class="col-md-7">
                                <input type="text"
                                       placeholder="<spring:message code="label.tenant.please.enter.mail.address"/>"
                                       class="form-control form-control sie-input-border sie-input-uwh"
                                       id="mail" onblur="verifyEmail('<spring:message
                                        code="label.tenant.please.enter.mail.address"/>','<spring:message
                                        code="label.tenant.please.enter.available.mail"/>')"
                                >
                                <span id="mailTips"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <table style="width: 90%;margin:auto" id="table">
                    <thead>
                    <tr>
                        <td class="table-header" style="width: 15%;"><spring:message code="label.choice"/></td>
                        <td class="table-header" style="width: 25%;"><spring:message code="label.event.name"/></td>
                        <td class="table-header" style="width: 25%;"><spring:message code="label.event.type"/></td>
                        <td class="table-header" style="width: 35%;"><spring:message
                                code="label.tenant.create.description"/></td>
                    </tr>
                    </thead>
                    <c:forEach items="${events}" var="event">
                        <tr>
                            <td class="table-body" style="width:15%;">
                                <div class="sie-flex-box" style="display: table">
                                    <div class="sie-flex-item item-access" data-eventid="${event.eventId}">
                                        <i class="sie-checkbox checked"></i>
                                    </div>
                                </div>
                            </td>
                            <td class="table-body" style="width:25%;">${event.eventName}</td>
                            <td class="table-body" style="width:25%;">${event.eventType}</td>
                            <td class="table-body" style="width:35%;">${event.eventDesc}</td>
                        </tr>
                    </c:forEach>
                    <tbody>
                    </tbody>
                </table>

                <div class="form-group form-group-change">
                    <div class="col-md-offset-5" style="margin-top: 79px;">
                        <a id="create" class="solid-button-blue" href="javascript:;"
                           style="margin-right: 30px"><spring:message code="label.save"/></a>
                        <a class="solid-button-orange" href="javascript:history.back(-1);"><spring:message
                                code="label.cancel"/></a>
                    </div>
                </div>
            </div>
        </div>
        <%--</div>--%>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script>
    $(document).ready(function () {
        $("#create").click(function () {
            var data = {};
            var type = $("input[type=radio]:checked").val();
            var eventArr = [];
            var checked = $("#table .item-checked");
            for (var i = 0; i < checked.length; i++) {
                eventArr.push($(checked[i]).data("eventid"));
            }
            if (eventArr.length==0){
                swal('<spring:message code="label.tenant.please.choose.subscribe.events"/>', "", "warning");
                return;
            }
            var subscription;
            data["type"] = type;
            data["event"] = eventArr;
            if (type == 1) {
                subscription =$("#uniqueId").find("option:selected").val();
                if (subscription==undefined||subscription==null||subscription==""){
                    swal('<spring:message code="label.tenant.please.choose.subscribe.device"/>', "", "warning");
                    return;
                }
            } else if (type == 2) {
                subscription=$("#group").find("option:selected").text();
                if (subscription==undefined||subscription==null||subscription==""){
                    swal('<spring:message code="label.tenant.please.choose.subscribe.group"/>', "", "warning");
                    return;
                }
            } else if (type == 3) {
                subscription = $("#line").find("option:selected").text();
                if (subscription==undefined||subscription==null||subscription==""){
                    swal('<spring:message code="label.tenant.please.choose.subscribe.line"/>', "", "warning");
                    return;
                }
            }
            data["subscription"]=subscription;
            if ($("#mail").val()==''){
                swal('<spring:message code="label.tenant.please.enter.mail.address"/>', "", "warning");
                return;
            }
            data["mail"] = $("#mail").val();

            $.ajax({
                url: "/partner/{tenant}/api/v1/even/create".replace("{tenant}", getKeyByUrl()),
                type: "post",
                data: JSON.stringify(data),
                contentType: "application/json;charset=utf-8",
                success: function () {
                    swal({
                        title: '<spring:message code="label.modify.success"/>',
                        text: "",
                        type: "success",
                        showCancelButton: false,
                        showConfirmButton: true,
                        confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                        animation: "slide-from-top"
                    }, function () {
                        window.location.replace(("/partner/{tenant}/event/list#eventSub").replace("{tenant}", getKeyByUrl()));
                    });
                },
                error: function () {
                    swal("Error!", "", "error");
                }
            })
        });
        bindRadioChangeEvent();
        $('#table .item-access').bind('click', function () {
            $(this).hasClass('item-checked') ? $(this).removeClass('item-checked') : $(this).addClass('item-checked');
        });
    });

    function loadModel(type) {
        $.ajax({
            url: "/partner/{tenant}/user/idle/reason/getDeviceModel".replace("{tenant}", getKeyByUrl),
            type: "get",
            data: {deviceType: type},
            success: function (data) {
                $("#model").html("");
                $("#model").append($("<option></option>").text('<spring:message code="label.select"/>'));
                $("#table .item-checked").removeClass("item-checked");
                console.log(data);
                $.each(data.data, function (index, model) {
                    var $model = $("<option></option>").attr('value', model).text(model);
                    $("#model").find("option:last").after($model);
                })
            },
            error: function (e) {
                console.log(e);
            }
        })
    }

    function loadMTId(model) {
        $.ajax({
            url: "/partner/{tenant}/user/idle/reason/getDeviceUniqueId".replace("{tenant}", getKeyByUrl),
            type: "get",
            data: {
                deviceType: $("#type").find("option:selected").val(),
                deviceModel: model
            },
            success: function (data) {
                $("#uniqueId").html("");
                $("#uniqueId").append($("<option></option>").text('<spring:message code="label.select"/>'));
                $("#table .item-checked").removeClass("item-checked");
                $.each(data.data, function (index, model) {
                    var $model = $("<option></option>").attr('value', model.device_id).text(model.device_unique_id);
                    $("#uniqueId").find("option:last").after($model);
                })
            },
            error: function (e) {
                console.log(e);
            }
        })
    }

    function bindRadioChangeEvent() {
        $("input[type=radio]").bind("change", function () {
            var v = $(this).val();
            if (v == 1) {
                $("#type").attr("disabled", false);
                $("#model").attr("disabled", false);
                $("#uniqueId").attr("disabled", false);
                $("#group").attr("disabled", true);
                $("#line").attr("disabled", true);
            } else if (v == 2) {
                $("#type").attr("disabled", true);
                $("#model").attr("disabled", true);
                $("#uniqueId").attr("disabled", true);
                $("#group").attr("disabled", false);
                $("#line").attr("disabled", true);
            } else if (v == 3) {
                $("#type").attr("disabled", true);
                $("#model").attr("disabled", true);
                $("#uniqueId").attr("disabled", true);
                $("#group").attr("disabled", true);
                $("#line").attr("disabled", false);
            }
        })
    }

    function MTIdChangeGetEvent(subscription) {
        $.ajax({
            url: "/partner/{tenant}/api/v1/eventSubForDevice".replace("{tenant}", getKeyByUrl()),
            type: "get",
            data: {subscription: subscription},
            success: function (data) {
                if (data.data.length == 0) {
                    $("#table .item-checked").removeClass("item-checked");
                } else {
                    $.each(data.data, function (index, event) {
                        var eventId = event.event_id;
                        $("#table .item-access[data-eventid='" + eventId + "']").addClass("item-checked");
                        $("#mail").val(event.email)
                    });

                }
            }
        })
    }
    function GroupChangeGetEvent(subscription) {
        $.ajax({
            url: "/partner/{tenant}/api/v1/eventSubForGroup".replace("{tenant}", getKeyByUrl()),
            type: "get",
            data: {subscription: subscription},
            success: function (data) {
                if (data.data.length == 0) {
                    $("#table .item-checked").removeClass("item-checked");
                } else {
                    $.each(data.data, function (index, event) {
                        var eventId = event.event_id;
                        $("#table .item-access[data-eventid='" + eventId + "']").addClass("item-checked");
                        $("#mail").val(event.email)
                    });

                }
            }
        })
    }
    function LineChangeGetEvent(subscription) {
        $.ajax({
            url: "/partner/{tenant}/api/v1/eventSubForLine".replace("{tenant}", getKeyByUrl()),
            type: "get",
            data: {subscription: subscription},
            success: function (data) {
                if (data.data.length == 0) {
                    $("#table .item-checked").removeClass("item-checked");
                } else {
                    $.each(data.data, function (index, event) {
                        var eventId = event.event_id;
                        $("#table .item-access[data-eventid='" + eventId + "']").addClass("item-checked");
                        $("#mail").val(event.email)
                    });

                }
            }
        })
    }




</script>